<template>
  <div class="setting-info">
    <div class="custom-title setting-info-title">账号登录日志</div>
    <div class="setting-info-box" :loading="state.loading">
      <div style="width: 100%;">
        <el-row :gutter="10" class="list-header">
          <el-col :span="6">
            <div class="item-th">登录IP</div>
          </el-col>
          <el-col :span="6">
            <div class="item-th">登录时间</div>
          </el-col>
          <el-col :span="6">
            <div class="item-th">登录地点</div>
          </el-col>
          <el-col :span="6">
            <div class="item-th">登录方式</div>
          </el-col>
        </el-row>
      </div>
      <div style="width: 100%;">
        <template v-if="state.dataList.length">
          <el-row :gutter="10" v-for="log in state.dataList" :key="log.id" class="list-row">
            <el-col :span="6">
              <div class="item-td">{{ log.ipaddr }}</div>
            </el-col>
            <el-col :span="6">
              <div class="item-td">{{ $timeDisplay('', '', log.ctime) }}</div>
            </el-col>
            <el-col :span="6">
              <div class="item-td">{{ log.loginLocation }}</div>
            </el-col>
            <el-col :span="6">
              <div class="item-td">{{ log.browser }}</div>
            </el-col>
          </el-row>
        </template>
        <el-empty v-else-if="!state.dataList.length && !state.loading" description="暂无数据" />
      </div>
    </div>
    <el-pagination v-show="state.dataList.length" class="pagination" v-model:current-page="queryData.pageNum"
      :page-size="queryData.pageSize" layout="total, prev, pager, next" :total="state.total"
      @current-change="handleCurrentChange" />
  </div>
</template>

<script setup name="log">
import { appPersonalMyLoginListPost } from '@/api/account'
const queryData = reactive({
  type: '1',
  pageNum: 1,
  pageSize: 12
})
const state = reactive({
  dataList: [],
  total: 0,
  loading: false,
  noMore: false
})
const getList = async () => {
  state.loading = true
  const res = await appPersonalMyLoginListPost({ body: queryData })
  if (res.code === 0) {
    console.log(res)
    state.dataList = res.data.records
    state.total = parseInt(res.data.total)
  }
  state.loading = false
}
const handleCurrentChange = (val) => {
  queryData.pageNum = val
  getList()
}

getList().catch((e) => {
  console.log(e)
})
</script>

<style lang="scss" scoped>
.setting-info {
  width: 100%;

  &-title {
    font-size: var(--jbc-font-size-extra-large);
  }

  .setting-info-box {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
  }

  .pagination {
    margin-top: 20px;
    justify-content: center;
  }
}

.list-header {
  background: #F8F8F8;
  border-radius: 8px;

  .item-th {
    font-weight: bold;
    font-size: var(--jbc-font-size-medium);
    color: var(--jbc-font-color);
    line-height: 22px;
    padding: 16px 0;
    text-align: center;
  }
}

.list-row {
  .item-td {
    font-size: 18px;
    color: #666666;
    line-height: 24px;
    text-align: center;
    padding: 19px 0;
  }
}
</style>